<template>
  <view class="card-box column-between">
    <view class="background"/>
    <view class="bg-box">
      <image src="/static/icon/background.png" mode="aspectFill"/>
    </view>

    <!--    内容-->
    <view class="column-between card-content">

      <!-- 商店名-->
      <view v-if="name" class="flex-center" style="gap: 12rpx;">
        <view class="name">{{ name }}</view>
        <view class="state">
          <view class="center" style="margin-top: 4rpx">
            {{ state ? '在线' : '离线' }}
          </view>
        </view>
      </view>


      <view class="column-between support-box">
        <view class="column-between" style="gap: 10rpx;">
          <view v-if="photo === 1 && canA3 === 1 && canA4 === 1" class="flex-row support-text">
            <view>仅支持照片和证件照打印</view>
          </view>
          <view class="flex-row param">
            <view class="flex-center item">
              <view :class="[ canDouble ? '' : 'color-red']">双面</view>
              <view class="flex-center">
                <image class="icon" :src="`/static/globalIcon/${canDouble ? 'tick' : 'close'}.svg`"/>
              </view>
            </view>
            <view class="flex-center item">
              <view :class="[ canColored?'':'color-red']">彩色</view>
              <view class="flex-center">
                <image class="icon" :src="`/static/globalIcon/${canColored ? 'tick' : 'close'}.svg`"/>
              </view>
            </view>
            <view class="flex-center item">
              <view :class="[ canA3?'':'color-red']">A3</view>
              <view class="flex-center">
                <image class="icon" :src="`/static/globalIcon/${canA3 ? 'tick' : 'close'}.svg`"/>
              </view>
            </view>
            <view class="flex-center item">
              <view :class="[ canA4 ? '' : 'color-red']">A4</view>
              <view class="flex-center">
                <image class="icon" :src="`/static/globalIcon/${canA4 ? 'tick' : 'close'}.svg`"/>
              </view>
            </view>
          </view>
        </view>

        <view class="flex-between">
          <view :class="['flex-center switch', locale]" hover-class="hover" @click="$emit('onSwitch')">
            <view>{{ lang.switch_devices }}</view>
            <u-icon name="map-fill" color="#1073FF" size="22"/>
          </view>
          <view>
            <heraa-lang-switch/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import heraaLangSwitch from "@/components/heraa-lang-switch/index.vue";

export default {
  components: {heraaLangSwitch},
  emits: ['onScan', 'onMap', 'onAnswer', 'onSwitch'],
  computed: {
    lang() {
      return this.$t('index')
    }
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    // 状态
    state: {
      type: Number,
      default: 0
    },
    // 双面
    canDouble: {
      type: Number,
      default: 0,
    },
    // 彩色
    canColored: {
      type: Number,
      default: 0,
    },
    // A3
    canA3: {
      type: Number,
      default: 0,
    },
    // A4
    canA4: {
      type: Number,
      default: 0,
    },
    // 证件
    photo: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  }
}
</script>

<style lang="scss">
.card-box {
  position: relative;
  height: 480rpx;
  border-radius: 12px;
}

.background {
  background: linear-gradient(106deg, #d5dce8 16.92%, rgba(255, 255, 255, 0) 84.21%);
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.bg-box {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;

  image {
    width: 100%;
    height: 100%;
  }
}

.card-content {
  z-index: 25;
  flex: 1;
  padding: 50upx 30upx;
}

.name {
  font-size: 20px;
  font-weight: 400;
  color: #000
}

.state {
  min-width: 90rpx;
  padding: 8rpx 18rpx;
  background: rgba(255, 255, 255, 0.40);
  border-radius: 28rpx;
  color: #5E5E5E;
  font-Size: 24rpx;
  word-wrap: break-word
}


.support-box {
  flex: 1;
  margin-top: 24rpx;

  .support-text {
    font-size: 28rpx;
    align-items: center;
    margin-left: 12rpx
  }
}

.param {
  width: fit-content;
  padding: 16rpx 26rpx;
  background: rgba(255, 255, 255, 0.40);
  border-radius: 28rpx;
  gap: 20rpx;

  .icon {
    width: 20rpx;
    height: 20rpx;
  }

  .item {
    font-size: 24rpx;
    gap: 6rpx
  }
}

.switch {
  background-color: #FFFFFF;
  color: #1073FF;
  border-radius: 60rpx;
  padding: 16rpx 20rpx 16rpx 24rpx;
  font-size: 28rpx;
  font-weight: 400;
  gap: 12rpx
}

.tools {
  justify-content: space-between;
  border-radius: 10px 0px 0px 0px;
  background-color: #FFFFFF;
  gap: 10rpx;
  padding: 10rpx 0rpx 0rpx 10rpx;
}

.tools_item {
  flex: 1;
  background-color: #F9F9F9;
  padding: 10rpx 16rpx;
  font-size: 12px;
  border-radius: 3px 3px 3px;
}

.printer_state {
  border-top-right-radius: 32rpx;
  padding: 10rpx 30rpx;
  background-color: #D7DBE3;
  border-bottom-left-radius: 20rpx;
  font-size: 12px;
}

.tools {
  justify-content: space-between;
  border-radius: 10upx 0 0 0;
  background-color: #FFFFFF;
  gap: 14rpx;
  padding: 10rpx 0rpx 0rpx 10rpx;
}

.tools_item {
  background-color: #F9F9F9;
  padding: 10rpx 16rpx;
  font-size: 12px;
  border-radius: 3px 3px 3px;
}
</style>
